<template>
  <div>
    <el-form @submit.native.prevent :inline="true" :model="params">
      <el-form-item>
        <el-date-picker
          v-model="datePicked"
          type="date"
          placeholder="创建时间"
          value-format="yyyy-MM-dd"
          @change="handleDateChange"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :stripe="false" :columns="tableColumns" :data="tableData">
      <template v-slot:bankCount="scope">
        <el-button type="text" class="btn-sm btn-long" @click="handleBankView(scope.row)">
          {{ scope.row.bank_count }}
        </el-button>
      </template>
    </c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData()"
      ></el-pagination>
    </div>

    <approval-apply-dialog
      :visible.sync="applyVisible"
      :approval-row="applyRow"
      :view-mode="applyViewMode"
      @success="handleSuccess"
    ></approval-apply-dialog>

    <task-hnd-approval-bank-dialog
      :visible.sync="bankVisible"
      :batch-id="batchId"
    ></task-hnd-approval-bank-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { statusAdapter } from '@/credit/views/province/hnd/hndTableMixin'

import ApprovalApplyDialog from '@/credit/views/province/hnd/ApprovalApplyDialog'
import TaskHndApprovalBankDialog from '@/credit/views/city/index/myTask/TaskHndApprovalBankDialog'

export default {
  components: {
    ApprovalApplyDialog,
    TaskHndApprovalBankDialog,
  },
  props: {
    visible: Boolean,
    taskStatus: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      loading: false,
      tableName: 'review_approval_batch_task',
      params: {
        index: 1,
        size: 10,
        'task_status.eq': 0,
        'task_person.eq': '',
        subKey: 'review_approval_batch.review_approval_batch_id',
      },
      order: {
        create_time: 'desc',
      },
      totalCount: 0,
      tableData: [],
      tableColumns: [
        {
          attrs: { label: '创建时间', prop: 'create_time' },
          process: v => this.$utils.dateFormat(v, 'yyyy-MM-dd'),
        },
        {
          attrs: { label: '涉及银行数量', prop: 'bank_count', align: 'center' },
          slot: 'bankCount',
        },
        { attrs: { label: '项目总数', prop: 'project_count', align: 'center' } },
        { attrs: { label: '审核推荐人', prop: 'res_person_point', align: 'center' } },
        { attrs: { label: '审查状态', prop: 'statusLabel', align: 'center' } },
        {
          attrs: { label: '操作', align: 'center', minWidth: 100 },
          operations: [
            {
              content: '审批',
              icon: 'fa fa-gavel',
              event: this.handleApply,
              ifRender: r => r.editable,
            },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handleView,
            },
          ],
        },
      ],

      datePicked: '',

      applyViewMode: false,
      applyVisible: false,
      applyRow: {},

      batchId: '',
      bankVisible: false,
    }
  },
  computed: {
    ...mapGetters(['user', 'userId']),
  },
  watch: {
    visible(val) {
      if (val) {
        this.getData()
      }
    },
  },
  created() {
    this.params['task_status.eq'] = this.taskStatus
    this.params['task_person.eq'] = this.userId
    this.getData()
  },
  mounted() {},
  methods: {
    async getData() {
      this.loading = true
      const [res] = await this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, this.params, this.order)
      )
      this.loading = false

      if (!res) {
        return this.$message.error('获取任务列表失败')
      }

      const data = (res && res.data) || {}
      this.tableData = (data.data || []).map(this.dataAdapter)
      this.totalCount = data.totalCount
    },
    dataAdapter(item) {
      statusAdapter(item, this.user)
      return item
    },
    handleApply(row = {}) {
      this.applyViewMode = false
      this.applyRow = { ...row }
      this.applyVisible = true
    },
    handleView(row = {}) {
      this.applyViewMode = true
      this.applyRow = { ...row }
      this.applyVisible = true
    },
    handleSuccess(res) {
      this.getData()
      this.$store.dispatch('getMyTaskCount')
      this.$emit('success', res)
    },
    handleDateChange(val) {
      if (val) {
        this.params['create_time.gt'] = val
        this.params['create_time.lte'] = `${val} 23:59:59`
      } else {
        this.params['create_time.gt'] = ''
        this.params['create_time.lte'] = ''
      }
      this.getData()
    },
    handleBankView(row) {
      this.batchId = row.review_approval_batch_id
      this.bankVisible = true
    },
  },
}
</script>

<style lang="scss" scoped></style>
